<template>
  <view class="container" v-if="shopInfo">
    <view class="goods-box">
      <z-paging-swiper>
        <view slot="top">
          <u-navbar title="点餐" :is-back="false" title-size="36" :border-bottom="false">
            <view style="padding: 0 20rpx" @click="$utils.goToHome()">
              <u-icon name="close" size="30"></u-icon>
            </view>
            <!-- #ifndef MP -->
            <view
              v-if="userInfo"
              slot="right"
              class="dis-flex flex-x-center flex-y-center"
              style="padding: 0 20rpx"
              @click="$utils.route('/dine/order/order')"
            >
              <u-icon name="/static/ddlb.png" size="30"></u-icon>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP -->
            <view
              v-if="userInfo"
              class="dis-flex flex-x-center flex-y-center"
              style="padding: 0 10rpx"
              @click="routeTo('/dine/order/order')"
            >
              <text style="font-size: 30rpx">我的订单</text>
            </view>
            <!-- #endif -->
          </u-navbar>
          <view class="card dis-flex">
            <u-image
              :src="shopInfo.logo"
              height="120rpx"
              width="120rpx"
              border-radius="10"
              mode="aspectFit"
            ></u-image>
            <view class="store-info flex-1">
              <view class="store-name">
                {{ shopInfo.name }}
              </view>
              <view v-if="shopInfo.notice" class="store-des oneline-hide-1"
                >公告：{{ shopInfo.notice }}
              </view>
              <view v-else class="store-des oneline-hide-1"
                >营业时间：{{ shopInfo.businessHours }}
              </view>
            </view>
            <view class="store-info">
              <text class="store-num">评分：{{ shopInfo.score.toFixed(1) }}</text>
              <text class="store-num">月售：{{ shopInfo.salesCountPerMonth }}</text>
              <text class="store-num"
                >起送：¥{{ (shopInfo.deliveryMinPrice * 0.01).toFixed(2) }}
              </text>
            </view>
          </view>
        </view>
        <swiper class="swiperView">
          <swiper-item class="swiperItem">
            <z-paging
              ref="paging"
              v-model="itemList"
              @query="queryList"
              :fixed="false"
              :auto="false"
              :empty-view-img="`${getImageUrl('empty.png')} `"
              empty-view-text="暂无数据~"
              :empty-view-img-style="imgStyle"
            >
              <view slot="left" class="rightView">
                <scroll-view
                  :scroll-y="true"
                  class="scrollView"
                  :style="{ height: `${navbarHeight}px` }"
                  :enhanced="true"
                  :show-scrollbar="false"
                >
                  <view class="menuView">
                    <view
                      :class="menuIndex == index ? 'menuTab' : 'menuTab2'"
                      v-for="(item, index) in menuList"
                      :key="index"
                      @click="onMenuTab(index, item)"
                    >
                      {{ item.name }}
                    </view>
                  </view>
                </scroll-view>
              </view>
              <view class="headView">
                <view @click="useNumModel = true" v-if="useNum > 0">用餐人数：{{ useNum }}人</view>
                <view @click="useNumModel = true" v-else
                  >请
                  <text style="color: #10a28f">【点击】</text>
                  选择用餐人数
                </view>
              </view>
              <view class="content" style="background-color: #fff">
                <view
                  class="itemView"
                  v-for="(item, index) in itemList"
                  :key="index"
                  @click="onDetails(item)"
                >
                  <view class="dis-flex" style="width: 100%">
                    <u-image
                      @click="onDetails(item)"
                      width="160"
                      height="160"
                      :src="item.picUrl"
                      border-radius="8"
                    ></u-image>
                    <view class="itemInfo">
                      <view class="itemTitle oneline-hide-1">{{ item.name }}</view>
                      <view class="sales">月售{{ item.salesCountPerMonth }}</view>
                      <view class="point-rule dis-flex">
                        <view class="price">
                          <text class="t">原价:¥</text>
                          <text class="n">{{ item.priceYuan }}</text>
                        </view>
                        <view v-if="item.skus[0].pointDeductCount">
                          {{ item.skus[0].pointDeductCount }}积分抵¥{{
                            item.skus[0].pointDeductPriceYuan
                          }}
                        </view>
                      </view>
                      <view
                        v-if="item.vipPriceYuan"
                        class="goods_tip dis-flex flex-y-center flex-y-between"
                      >
                        <view class="vip-price">
                          <text class="t">会员价:¥</text>
                          <text class="n">{{ item.vipPriceYuan }}</text>
                        </view>
                      </view>
                      <u-icon
                        v-if="!item.specType"
                        :class="[`add-cart-${item.id}`]"
                        class="uicon"
                        style="margin-right: 15rpx"
                        @click.native.stop.prevent="addToCart(item)"
                        size="32"
                        name="/static/add-y.png"
                      ></u-icon>
                      <view
                        @click.stop.prevent="showSpecList(item)"
                        v-else
                        class="uicon uicon-1"
                        style="margin-right: 15rpx"
                        >选规格
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </z-paging>
          </swiper-item>
        </swiper>
      </z-paging-swiper>
    </view>

    <u-popup v-model="useNumModel" mode="center" width="610" height="600" border-radius="20">
      <view class="num-box dis-flex flex-y-between">
        <view class="num-tl">选择用餐人数</view>
        <view class="num-list dis-flex">
          <view
            @click="checkUseNum(num)"
            class="num-item"
            :class="{ 'num-item-active': useNum === num }"
            v-for="(num, index) in numList"
            :key="index"
          >
            {{ num }}
          </view>
        </view>
        <view style="padding: 0 20rpx">
          <u-line border-style="dashed"></u-line>
        </view>
        <view class="num-cus dis-flex flex-y-center">
          <view class="num-cus-tl">自定义人数</view>
          <input class="num-cus-input" v-model="useNum" type="digit" />
        </view>
        <view style="padding: 0 20rpx">
          <u-line border-style="dashed"></u-line>
        </view>
        <view class="num-bt" @click="checkedUseNum()">开始点餐</view>
      </view>
    </u-popup>

    <!-- --start-- 购物车弹窗 -->

    <u-popup
      v-model="showSpecModel"
      backgroundColor="transparent"
      bgColor="transparent"
      mode="center"
      width="500rpx"
      height="auto"
      border-radius="30"
    >
      <view class="tishi-box">
        <view class="content" v-if="goodsInfo">
          <view class="goods-detail">
            <view class="name">{{ goodsInfo.name }}</view>
            <view class="spec">
              <view class="tl">规格：</view>
              <view class="spec-list">
                <view
                  class="spec-item"
                  v-for="(spec, specIndex) in goodsInfo.uniapp.spec_list"
                  :key="specIndex"
                >
                  <text style="margin-right: 20rpx; font-size: 24rpx; color: #666666"
                    >{{ spec.name }}
                  </text>
                  <text
                    v-for="(_spec, _specIndex) in spec.list"
                    :key="_specIndex"
                    class="text"
                    :class="_spec.checked ? 'checked' : ''"
                    @click="checkSpecItem(specIndex, _specIndex)"
                    >{{ _spec.name }}
                  </text>
                </view>
              </view>
            </view>
            <view class="check-item"
              >已选规格:
              <text v-if="checkedSpecItem">{{ checkedSpecItem.sku_name_arr.join(',') }}</text>
              <text v-else>请选择</text>
            </view>
            <view class="const dis-flex flex-y-center">
              <view class="">
                原价:¥
                <text class="bold" v-if="checkedSpecItem"
                  >{{ (checkedSpecItem.price * 0.01).toFixed(2) }}
                </text>
                <text v-else>-.-</text>
              </view>
              <view class="vip-price"
                >会员价:¥
                <text class="bold" v-if="checkedSpecItem && goodsInfo.skus[checkedSpecItemIndex]"
                  >{{ (goodsInfo.skus[checkedSpecItemIndex].vipPrice * 0.01).toFixed(2) }}
                </text>
                <text v-else>-.-</text>
              </view>
            </view>
            <view class="goods-point dis-flex flex-y-between">
              <view
                v-if="
                  checkedSpecItem &&
                  goodsInfo.skus[checkedSpecItemIndex] &&
                  goodsInfo.skus[checkedSpecItemIndex].pointDeductCount
                "
                class="point"
              >
                {{ goodsInfo.skus[checkedSpecItemIndex].pointDeductCount }}积分抵¥{{
                  goodsInfo.skus[checkedSpecItemIndex].pointDeductPriceYuan
                }}
              </view>
            </view>
            <view class="goods-cryptocurrency dis-flex flex-y-between">
              <view
                v-if="
                  checkedSpecItem &&
                  goodsInfo.skus[checkedSpecItemIndex] &&
                  goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductCount
                "
                class="cryptocurrency"
              >
                {{ goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductCount }}收益豆抵¥{{
                  goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductPriceYuan
                }}
              </view>
            </view>
            <view class="bottom dis-flex flex-y-between">
              <view v-if="checkedSpecItem" @click="addToCartSpec()" class="add-card">确认</view>
              <view v-else @click="addToCartSpec()" class="add-card disabled">确认</view>
              <view @click="colseSpecModle()" class="add-card" style="background-color: gray"
                >取消
              </view>
            </view>
          </view>
        </view>
        <text v-else>没有获取到菜品数据</text>
      </view>
    </u-popup>

    <u-popup
      v-model="showCardModel"
      @close="closeCarList"
      mode="bottom"
      width="100%"
      height="800rpx"
      border-radius="30"
    >
      <view class="car-box">
        <view class="car-tl dis-flex flex-y-between flex-x-center">
          <view class="tl-l">
            <text>购物车</text>
            <text style="color: #999999; font-size: 24rpx">共{{ carList.length }}样菜品</text>
          </view>
          <view
            v-if="carList.length > 0"
            class="clear dis-flex flex-y-center"
            @click="clearCarList()"
          >
            <text>清空购物车</text>
          </view>
          <view
            v-else
            class="dis-flex flex-y-center"
            style="padding: 10rpx"
            @click="showCardModel = false"
          >
            <u-icon name="/static/close-t.png" size="30"></u-icon>
          </view>
        </view>
        <view class="car-list">
          <scroll-view v-if="carList.length > 0" :scroll-y="true" style="height: 550rpx">
            <view class="itemView" v-for="(item, index) in carList" :key="item.id">
              <view class="dis-flex" style="position: relative">
                <u-image width="90" height="90" :src="item.picUrl" border-radius="8"></u-image>
                <view class="itemInfo">
                  <view class="dis-flex flex-x-end">
                    <view class="itemTitle oneline-hide-1">{{ item.name }}</view>
                    <view style="font-size: 24rpx; color: #999999; margin-left: 10rpx">
                      <text v-for="(item2, i) in item.sku.properties" :key="i"
                        >{{ item2.valueName + (i === item.sku.properties.length - 1 ? '' : ',') }}
                      </text>
                    </view>
                    <view class="flex-1"></view>
                    <u-icon
                      @click="delCartItem(item)"
                      name="/static/sc.png"
                      style="margin-right: 10rpx"
                      size="30"
                    >
                    </u-icon>
                  </view>
                  <view class="dis-flex">
                    <view class="point-rule dis-flex flex-column">
                      <view class="price">
                        <text class="t">原价:¥</text>
                        <text class="n">{{ item.priceYuan }}</text>
                      </view>
                      <view class="vip-price">
                        <text class="t">会员价:¥</text>
                        <text class="n">{{ item.vipPriceYuan }}</text>
                      </view>
                    </view>
                    <view class="uicon numberBox">
                      <u-number-box
                        v-model="item.count"
                        :index="index"
                        :min="0"
                        :disabled-input="false"
                        @change="onCartCont(item)"
                        @minus="onCartCont(item)"
                        @plus="onCartCont(item)"
                      ></u-number-box>
                    </view>
                  </view>
                </view>
                <view v-if="item.invalid" class="cant-check">
                  <text> {{ item.invalidReason }}</text>
                  <view class="flex-1"></view>
                  <text class="del" @click="delCartItem(item)">删除</text>
                </view>
              </view>
            </view>
            <u-gap height="45"></u-gap>
          </scroll-view>
          <view v-else class="nomore">暂无菜品</view>
        </view>
      </view>
    </u-popup>

    <view v-if="carList.length > 0" class="fixed-wapper" style="z-index: 99999">
      <view class="bt-box dis-flex">
        <view class="other dis-flex flex-y-between flex-y-center">
          <view class="count dis-flex flex-y-center" style="flex: 1" @click="showCarList">
            <view class="count-icon">
              <u-icon name="/static/gwc-tm.png" style="margin-top: 10rpx" size="48"></u-icon>
              <u-badge
                type="error"
                size="mini"
                :count="carList.reduce((a, b) => a + b.count, 0)"
                :offset="[0, -20]"
              ></u-badge>
            </view>
            <text v-if="countPrice && !isNaN(countPrice)" class="count-text"
              >¥{{ (countPrice * 0.01).toFixed(2) }}
            </text>
            <!-- <text class="deliver-price">预估配送费3元</text> -->
          </view>
          <view @click="submit" class="submit-btn"> 去下单</view>
        </view>
      </view>
    </view>

    <view
      v-for="item in anims"
      :key="item.key"
      class="add-btn-radio"
      style="position: fixed; transition: transform 0.5s linear"
      :style="{
        top: `${item.top}px`,
        left: `${item.left}px`,
        transform: `translate(${item.x}px, ${item.y}px)`
      }"
    >
      <u-icon size="32" name="/static/add-y.png"></u-icon>
    </view>

    <!-- --end-- 购物车弹窗 -->
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      shopId: '',
      deskNo: '',
      shopInfo: null,
      zIndex: 999,
      useNum: 0,
      useNumModel: false,
      userInfo: null,
      numList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      itemList: [],
      imgStyle: {
        width: '12rem'
      },
      menuList: [],
      menuIndex: 0,
      statusBarHeight: systemInfo.statusBarHeight,
      pageHight: systemInfo.screenHeight,
      height: null,
      disable: false,
      // --start-- 购物车弹窗
      goodsInfo: undefined,
      showCardModel: false,
      showSpecModel: false,
      carList: [],
      checkedSpecItem: undefined,
      checkedSpecItemIndex: undefined,
      shecedSpecList: [],
      countPrice: 0,
      anims: []
      // --end-- 购物车弹窗
    }
  },
  onLoad(options) {
    this.shopId = options.shopId || '1915697490670272514'
    this.deskNo = options.deskNo || ''
    this.$u
      .get('/app-api/shop/info/get', {
        id: this.shopId
      })
      .then((res) => {
        this.shopInfo = res.data
        this.$u
          .get('/app-api/product/category/list', {
            shopId: this.shopId
          })
          .then((res) => {
            this.menuList = res.data
            this.checkedCate = this.menuList[0]
            this.queryList(1)
          })
      })
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    console.debug('userInfo', this.userInfo)
    this.loadCartList()
  },
  computed: {
    navbarHeight() {
      let navbarHeight = 0,
        pageHight = systemInfo.screenHeight,
        statusBarHeight = systemInfo.statusBarHeight
      // #ifdef APP-PLUS || H5
      navbarHeight = this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      navbarHeight = this.height ? this.height : height
      // #endif
      return pageHight - navbarHeight - statusBarHeight - 80 - 65
    }
  },
  methods: {
    onMenuTab(index, item) {
      this.menuIndex = index
      this.queryList(1)
    },
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u
        .get('/app-api/product/spu/page-by-product-category', {
          // shopId: this.shopId,
          categoryId: this.menuList[this.menuIndex].id,
          status: 1,
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
          this.loadCartList()
        })
    },
    checkUseNum(num) {
      this.useNum = num
    },
    checkedUseNum() {
      if (this.useNum == '' || this.useNum <= 0) {
        this.$u.toast('请选择用餐人数')
        return
      }
      this.useNumModel = false
    },
    onDetails(item) {
      this.$utils.route({
        url: '/goods/goods-details/goods-details?goodsId=' + item.id + '&shopId=' + item.shopId
      })
    },
    // --start-- 购物车弹窗
    toLogin() {
      this.$utils.goToLogin('/dine/diancan/diancan?shopId=' + this.shopId)
    },
    onCartCont(item) {
      const app = this
      app.$u.throttle(function () {
        app.$u.api
          .putCartCount({
            id: item.carId || item.id,
            count: item.count
          })
          .then((res) => {
            if (res.code === 0) {
              if (item.count === 0) {
                app.delCartItem(item)
              } else {
                app.loadCartList()
              }
            } else {
              app.$u.toast(res.msg)
            }
          })
      }, 200)
    },
    delCartItem(item) {
      const app = this
      app.$u.get('/app-api/trade/cart/delete?ids=' + item.carId).then((res) => {
        if (res.code === 0) {
          app.$u.toast('移除成功')
          app.loadCartList()
        } else {
          app.$u.toast(res.msg)
        }
      })
    },
    clearCarList() {
      this.$u
        .get('/app-api/trade/cart/deleteByShopId', {
          shopId: this.shopId
        })
        .then((res) => {
          if (res.code === 0) {
            this.$u.toast('清空成功')
            this.carList = []
            this.onTotalPrice()
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    loadCartList() {
      const app = this
      app.$u.api
        .getCartList({
          shopId: app.shopId
        })
        .then((res) => {
          if (res.data && res.data.length > 0) {
            app.carList = res.data[0].items.map((it) => ({
              id: it.id,
              carId: it.id,
              count: it.count,
              skuId: it.sku.id,
              price: it.sku.price,
              priceYuan: (it.sku.price * 0.01).toFixed(2),
              name: it.spu.name,
              picUrl: it.spu.picUrl,
              sku: it.sku,
              invalid: it.invalid,
              vipPrice: it.sku.vipPrice,
              vipPriceYuan: (it.sku.vipPrice * 0.01).toFixed(2),
              invalidReason: it.invalidReason
            }))
          } else {
            app.carList = []
          }
          app.onTotalPrice()
        })
    },
    onTotalPrice() {
      if (this.carList.length == 0) {
        this.countPrice = 0
        return
      }
      let total = 0
      for (const carItem of this.carList) {
        total += carItem.price * carItem.count
      }
      this.countPrice = total
    },
    checkSpecItem(index, valueIndex) {
      let spec = this.goodsInfo.uniapp.spec_list[index]
      let value = this.goodsInfo.uniapp.spec_list[index].list[valueIndex]
      let newList = []
      spec.list.forEach((_spec, i) => {
        if (valueIndex == i) {
          _spec.checked = true
        } else {
          _spec.checked = false
        }
        newList.push(_spec)
      })
      this.goodsInfo.uniapp.spec_list[index].list = newList
      const existingIndex = this.shecedSpecList.findIndex((item) => item.name === spec.name)
      if (existingIndex !== -1) {
        this.shecedSpecList.splice(existingIndex, 1)
      }
      const newSpec = {
        name: spec.name,
        value: value.id
      }
      this.shecedSpecList.push(newSpec)
      if (this.shecedSpecList.length == this.goodsInfo.uniapp.spec_list.length) {
        this.goodsInfo.uniapp.sku_list.forEach((sku) => {
          sku.isThis = sku.spec_value_ids.every((item) =>
            this.shecedSpecList.some((checked) => checked.value === item)
          )
          if (sku.isThis) {
            this.checkedSpecItem = sku
            let skuIndex = this.goodsInfo.skus.findIndex(
              (sku) => sku.id === this.checkedSpecItem._id
            )
            this.checkedSpecItemIndex = skuIndex
          }
        })
      }
    },
    showCarList() {
      if (this.showCardModel) {
        this.showCardModel = false
      } else {
        this.showCardModel = true
        this.loadCartList()
      }
    },
    showSpecList(item) {
      item.uniapp.spec_list.forEach((spec) => {
        spec.list.forEach((_spec) => {
          _spec.checked = false
        })
      })
      this.showSpecModel = true
      this.goodsInfo = item
    },
    addToCartSpec() {
      if (!this.checkedSpecItem) {
        this.$u.toast('请选择规格')
        return
      }
      let goods = this.$utils.deepClone(this.goodsInfo)
      let skuIndex = this.goodsInfo.skus.findIndex((sku) => sku.id === this.checkedSpecItem._id)
      let sku = goods.skus[skuIndex]
      goods.skus[0] = sku
      this.addToCart(goods)
      this.colseSpecModle()
    },
    colseSpecModle() {
      this.showSpecModel = false
      this.checkedSpecItem = {}
      this.shecedSpecList = []
    },
    addToCar(item = undefined) {
      if (!this.$utils.checkLogin(true)) {
        return
      }
      if (!item) {
        item = this.goodsInfo
      }
      if (item.skus.length > 1) {
        this.showSpecList(item)
      } else {
        this.addToCart(item)
      }
    },
    addToCart(item) {
      if (!this.userInfo) {
        this.toLogin()
        return
      }
      if (this.disable) {
        return
      }
      this.disable = true
      let skuId = item.skus[0].id || item.skus[0]._id
      let carItem = {
        count: 1,
        skuId: skuId,
        priceYuan: item.skus[0].priceYuan,
        id: item.id,
        name: item.name,
        picUrl: item.picUrl,
        sku: item.skus[0],
        vipPriceYuan: item.skus[0].vipPriceYuan
      }
      this.playAnim(item.id)
      let self = this
      self.$u.api
        .setCartAdd(carItem)
        .then(() => {
          this.disable = false
          self.$u.toast('添加成功')
          self.loadCartList()
        })
        .catch(() => {
          this.disable = false
        })
    },
    closeCarList() {
      this.loadCartList()
    },
    playAnim(itemId) {
      const key = itemId
      this.anims.push({
        key,
        id: itemId,
        left: 0,
        top: 0,
        y: 0,
        x: 0
      })
      // 获取点击元素的节点信息
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(`.add-cart-${itemId}`)
          .boundingClientRect((e) => {
            // 初始化起始位置
            const currentAnim = this.anims.find((citem) => citem.key === key)
            if (currentAnim) {
              currentAnim.top = e.top
              currentAnim.left = e.left
              // 设置目标位置
              currentAnim.y = uni.getSystemInfoSync().windowHeight - e.top - 50
              currentAnim.x = -uni.getSystemInfoSync().windowWidth * 0.78
              setTimeout(() => {
                // 等待动画执行完毕移除元素
                this.anims.splice(
                  this.anims.findIndex((v) => v.key === key),
                  1
                )
              }, 500)
            }
          })
          .exec()
      })
    },
    submit() {
      if (this.carList.length == 0) {
        this.$u.toast('请先添加菜品')
        return
      }
      if (this.useNum === 0) {
        this.$u.toast('请先选择用餐人数')
        return
      }
      let items = []
      this.carList.forEach((item) => {
        if (!item.invalid) {
          items.push({
            cartId: item.carId || item.id
          })
        }
      })
      if (items.length == 0) {
        this.$u.toast('加购的菜品已失效')
        return
      }
      this.$utils.route(
        {
          url: 'goods/order-confirm/order-confirm',
          params: {
            items: JSON.stringify(items)
          }
        },
        true
      )
    }
    // --end-- 购物车弹窗
  }
}
</script>
<style lang="scss" scoped>
@import url('@/style/btn.css');

.container {
  position: relative;
}

.card {
  margin: 20rpx 0;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.store-info {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 120rpx;
  padding: 10rpx 20rpx;

  .store-name {
    font-size: 30rpx;
    color: #333333;
  }

  .store-des {
    font-size: 26rpx;
    color: #999999;
  }

  .store-num {
    font-size: 26rpx;
    color: #666666;
  }
}

.goods-box {
  .rightView {
    width: 180rpx;
    height: 100%;
    background: #fff;

    .menuTab {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #10a28f;
      position: relative;
      border-right: 8rpx solid #10a28f;
      box-sizing: border-box;
      border-radius: 6rpx;
    }

    .menuTab2 {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-right: none;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }
  }

  .headView {
    margin-left: 10rpx;
    display: flex;
    align-items: center;
    position: sticky;
    background: #fff;
    z-index: 100;
    height: 60rpx;
    top: 0px;
    justify-content: flex-end;
    padding-right: 20rpx;
  }

  .content {
    background-color: #fff;
    padding: 20rpx;
    margin-left: 10rpx;
  }
}

.num-box {
  height: 600rpx;
  flex-flow: column;
  text-align: center;

  .num-tl {
    font-weight: 600;
    font-size: 28rpx;
    padding: 30rpx 20rpx 20rpx 20rpx;
  }

  .num-list {
    flex-wrap: wrap;

    .num-item {
      width: 128rpx;
      height: 60rpx;
      line-height: 60rpx;
      background: #ffffff;
      border-radius: 10rpx;
      border: 1px solid #e6e6e6;
      margin-left: 20rpx;
      margin-bottom: 20rpx;
      box-sizing: border-box;
    }

    .num-item-active {
      background: $uni-color-primary;
      color: white;
    }
  }

  .num-cus {
    padding: 20rpx;

    .num-cus-tl {
      font-size: 30rpx;
    }

    .num-cus-input {
      height: 60rpx;
      line-height: 60rpx;
      background: #ffffff;
      border-radius: 10rpx;
      border: 1px solid #e6e6e6;
      margin-left: 20rpx;
      flex: 1;
      text-align: left;
      padding: 0 20rpx;
    }
  }

  .num-bt {
    height: 100rpx;
    background: #10a28f;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 100rpx;
  }
}

// --start-- 购物车弹窗

.itemView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 20rpx 20rpx 0 20rpx;
  margin: 0px 20rpx;
  margin-bottom: 20rpx;
}

.itemInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10rpx;
  position: relative;
  padding-bottom: 20rpx;

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    align-items: center;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .price {
    color: #333333;
  }

  .vip-price {
    color: #fa453c;
  }

  .t {
    font-size: 26rpx;
  }

  .n {
    font-size: 32rpx;
    font-weight: 600;
  }

  .uicon {
    position: absolute;
    right: 0;
    bottom: 20rpx;
  }

  .uicon-1 {
    width: 96rpx;
    background: #10a28f;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: #ffffff;
    text-align: center;
    padding: 2rpx 0;
  }
}

.itemText {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemPrice {
  font-size: 20rpx;
  font-weight: 400;
  color: #ff3616;
  margin-right: 10rpx;
}

.itemPrice2 {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff2323;
  margin-right: 10rpx;
}

.itemOPrice {
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #c2c2c2;
}

.car-box {
  .car-tl {
    width: 750rpx;
    height: 100rpx;
    background: #f5f5f5;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding: 0 20rpx;

    .tl-l {
      line-height: 100rpx;
    }

    .clear {
      font-size: 26rpx;
      color: $uni-color-primary;
    }
  }

  .car-list {
    padding: 20rpx;

    .nomore {
      padding-top: 100rpx;
      text-align: center;
      color: #999999;
    }

    .numberBox {
      bottom: -4rpx;
    }
  }
}

.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
  }
}

.goods-detail {
  .name {
    font-size: 28rpx;
    font-weight: bold;
    color: #666666;
    text-align: center;
  }

  .spec {
    margin-top: 30rpx;

    .tl {
      font-size: 24rpx;
    }

    .spec-list {
      margin-top: 20rpx;

      .spec-item {
        margin-bottom: 20rpx;
      }

      .text {
        height: 50rpx;
        background: #ffffff;
        border-radius: 10rpx;
        border: 1px solid #e6e6e6;
        line-height: 50rpx;
        padding: 10rpx 40rpx;
        margin-right: 20rpx;
      }

      .checked {
        background: #10a28f;
        color: #fff;
        border: 1px solid #10a28f;
      }

      .text:last-child {
        margin-right: 0;
      }
    }
  }

  .check-item {
    font-size: 24rpx;
    color: #999999;
    margin-top: 29rpx;
  }

  .const {
    font-size: 26rpx;
    margin-top: 30rpx;

    .point,
    .vip-price {
      color: #ff6f10;
      margin-left: 15rpx;
    }
  }

  .bottom {
    font-size: 26rpx;
    color: #fa453c;
    margin-top: 30rpx;
    padding: 10rpx 30rpx;

    .add-card {
      width: 180rpx;
      height: 60rpx;
      background: #10a28f;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
    }
  }

  .bold {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.goods-point {
  align-items: center;

  .point {
    margin-top: 5rpx;
    font-size: 26rpx;
    color: #ff6f10;
  }
}

.cryptocurrency {
  margin-top: 5rpx;
  font-size: 26rpx;
  color: #ff6f10;
}

.fixed-wapper {
  width: 100%;
  background-color: #fff;
  left: 0;
  // bottom: 120rpx;

  .bt-box {
    height: 96rpx;
  }

  .other {
    width: 92%;
    background: #333333;
    border-radius: 40rpx;
    margin-left: 4%;
    height: 80rpx;
    margin-top: 8rpx;

    .count {
      font-weight: 600;
      font-size: 36rpx;
      color: #ffffff;
      padding-left: 50rpx;

      .count-text {
        margin-left: 40rpx;
      }

      .deliver-price {
        font-size: 24rpx;
        margin-left: 20rpx;
        font-weight: 400;
      }

      .count-icon {
        position: relative;
      }
    }

    .submit-btn {
      width: 200rpx;
      border-radius: 0 40rpx 40rpx 0;
    }
  }
}

// --end-- 购物车弹窗
</style>
